<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
</head>
<body>
<script>
    // setTimeout(()=>{},1000);
    // event
    // ajax
    // axios
    // wx.request

    //同步
    //异步 不会阻塞同步代码执行
    // console.log(1)
    // console.log(2)
    // setTimeout(()=>{//异步
    //     console.log(3)
    // })
    // console.log(4)

    // http是无状态的(服务器与客户端通讯的过程中,不知道你是你)
    // 1.token=>(跨域)
    // ajax(帐号和密码) ==login==>
    // 服务器(帐号和密码对比数据库?"token(帐号/密码/登陆时间/MAC/IP)":"失败") ==返回给前端==>
    // 前端接收到之后,进行保存,然后在后续的所有请求中都去加上token (服务器就知道你是你了)
    // 2.cookie session=>(同源)
    // ajax(帐号和密码) ==login==>
    // 服务器(帐号和密码对比数据库?"保存在服务器中session(帐号/密码/登陆时间/MAC/IP)":"失败")
    // ==返回(响应头set-session="cookie(字段)")给前端==>
    // 前端拿到响应后浏览器发现响应头里有(set-session)就会把后面的cookie存储到本地存储中的cookie里
    // 之后的每次请求浏览器会直接的把cookie字段放到请求头里给后台服务器

    // 同源策略
    // url(http://www.baidu.com:80)
    //     协议:// 域名 :端口号
    //协议/域名/端口号都相同同源 (接口地址 和 本地项目)
    //协议/域名/端口号只要有一个不相同 就会跨域
    //localhost:8081 => 127.0.0.1=>localhost
    //http://127.0.0.1:8081



    //ES6中新增加了本地存储
    //localStorage sessionStorage


    //AJAX => Async Javascript and Xml(可扩展标记语言)
    //axios => AJAX I/O(input输入/output输出) System

    //原生ajax

/*    //1.创建一个XMLHttpRequest实例
    let xhr = new XMLHttpRequest();
    //2.xml的open方法
    xhr.open("get","https://cnodejs.org/api/v1/topics",false);
    //设置请求头信息
    // xhr.setRequestHeader("token","tokenString");
    //3.xml的监听
    xhr.onreadystatechange = function (){
        console.log(xhr.readyState);//xhr状态 0 1 2 3 4
        /!*
        * xhr.readyState xhr本身的一些状态
        * 0 请求未初始化 刚刚实例化XMLHttpRequest
        * 1 服务器建立连接 调用了open方法
        * 2 请求已经被接受
        * 3 请求在处理中 xhr.send(data)
        * 4 请求处理完成,相应已就绪
        * *!/
        console.log(xhr.status);//http状态码100 200 300 400 500
        if(xhr.readyState === 4 && xhr.status=== 200){
            console.log(xhr.responseText)
        }
    };
    // //4.发送请求
    xhr.send(null)*/


    //封装自己的ajax
    function ajax(options = {
        url:"https://cnodejs.org/api/v1/topics", //请求地址
        data:null, //要发送的数据
        method:"GET", //请求方式
        success:function (){}, //成功后的回调
        fail:function() {}, //失败后的回调
        async: false, //同步或者异步
        headers: { //请求头信息
            token: "tokenString"
        }
    }){
        let xhr = new XMLHttpRequest();
        xhr.open(options.method,options.url,options.async);
        for(let headKey in options.headers){
            xhr.setRequestHeader(headKey,options.headers[headKey]);
        }
        xhr.onreadystatechange = function (){
            console.log(xhr.status);//http状态码100 200 300 400 500
            if(xhr.readyState === 4){//已经拿到了服务器相应
                switch (xhr.status){
                    case 200:
                        options.success && options.success(JSON.parse(xhr.responseText))
                        break;
                    default:
                        options.fail && options.fail(xhr.responseText)
                }
            }
        };
        xhr.send(options.data)
    }


    // ajax({
    //     url:"https://cnodejs.org/api/v1/topics", //请求地址
    //     data:{}, //要发送的数据
    //     method:"GET", //请求方式
    //     success(res){//成功后的回调
    //         console.log("调用自己的ajax",res)
    //     },
    //     fail(err){//失败后的回调
    //         console.log(err)
    //     },
    //     async: false, //同步或者异步
    //     headers: { //请求头信息
    //         token: "tokenString"
    //     }
    // });


    let axios = {
        baseUrl:"",
        get(url,data){
            return new Promise(resolve => {
                ajax({
                    url:url, //请求地址
                    data:data, //要发送的数据
                    method:"GET", //请求方式
                    success(res){//成功后的回调
                        console.log("调用自己的ajax",res);
                        resolve(res)
                    },
                    fail(err){//失败后的回调
                        console.log(err)
                    },
                    async: false, //同步或者异步
                    headers: { //请求头信息
                        token: "tokenString"
                    }
                });
            })
        }
    }
    axios.get("https://cnodejs.org/api/v1/topics",{a:1}).then(res=>{
        console.log("自己封装的axios",res)
    })


    // 什么是RESTful API(风格)？==>根据请求方式的不同,同一个接口就有不同的返回值和作用
    //请求方式GET POST DELETE PUT OPTION; 语义化
    //GET 请求数据 https://cnodejs.org/api/v1/topics?id=xx
    //POST 发送数据 https://cnodejs.org/api/v1/topics send({...x})
    //DELETE 删除 https://cnodejs.org/api/v1/topics?id=xx
    //PUT 修改 https://cnodejs.org/api/v1/topics?id=xx send({...x})

    //GET 和 POST 区别
    //传参的区别
    // GET传参 通过URL问号传参的形式
    // POST传参 在请求体中直接发送数据
    //传递数据大小的区别
    // GET 传参传递的数据比较小 2k(url的长度所限制:URL本身是没有长度限制的,但是浏览器是有限制的)
    // POST 严格意义来说没有大小限制 (JSON FORM BASE64 视频音频BUFFER(二进制数据流))

    //url 传参是明文传输, 安全性相对较差
    //POST 当对来说安全性较高

    //GET请求速度要快于POST  POST发送请求的时候会先有一个OPTION(跟服务器进行通讯 确定跨域,是否缓存...)


</script>
</body>
</html>